Intro

Environment setup

Navbar UI

Auth UI

Register functionality, MongoDB, Prisma setup

Login functionality

Social Login (Google and Github)

Categories UI

Listing creation step 1 (Category selection)

Listing creation step 2 (Location selection, Map component, Country autocomplete)

Listing creation step 3 (Counter components)

Listing creation step 4 (Image upload, Cloudinary CDN)

Listing creation step 5 (Description and Price, Listing creation POST route)

Fetching listings with server components (Listing card component, direct server action)

Favoriting functionality

Individual Listing View

Listing reservation component

Reservation functionality (routes, logic)

Trips screen (Loading trips with server component)

Reservations screen (Loading guest reservations with server component)

Favorites screen (Loading favorites with server component)

Properties screen (Loading your listings with server component)

Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)

Vercel deploy & wrap up

Thanh Le

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Code With Antonio

9.3K

Likes

215,053

Views

Mar 31

2023

Discord for any problems/errors/bugs: https://discord.gg/SPEBvAz4Vd Github Repository: https://github.com/AntonioErdeljac/ne... Cloudinary: https://cloudinary.com/ In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework. The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience. Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth. This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router! Timestamps 00:00 Intro 02:21 Environment setup 09:30 Navbar UI 34:30 Auth UI 01:35:20 Register functionality, MongoDB, Prisma setup 02:09:27 Login functionality 02:28:04 Social Login (Google and Github) 02:44:36 Categories UI 03:11:34 Listing creation step 1 (Category selection) 03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete) 04:06:40 Listing creation step 3 (Counter components) 04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN) 04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route) 04:49:00 Fetching listings with server components (Listing card component, direct server action) 05:23:12 Favoriting functionality 05:39:27 Individual Listing View 06:16:57 Listing reservation component 06:42:33 Reservation functionality (routes, logic) 06:55:05 Trips screen (Loading trips with server component) 07:10:59 Reservations screen (Loading guest reservations with server component) 07:33:13 Favorites screen (Loading favorites with server component) 07:42:35 Properties screen (Loading your listings with server component) 07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages) 08:37:48 Vercel deploy & wrap up

Intro

Environment setup

Navbar UI

Auth UI

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Code With Antonio

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Code With Antonio

25.4K subscribers

215,053 views Mar 31, 2023

Discord for any problems/errors/bugs: https://discord.gg/SPEBvAz4Vd Github Repository: https://github.com/AntonioErdeljac/ne... Cloudinary: https://cloudinary.com/ In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework. The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience. Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth. This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router! Timestamps 00:00 Intro 02:21 Environment setup 09:30 Navbar UI 34:30 Auth UI 01:35:20 Register functionality, MongoDB, Prisma setup 02:09:27 Login functionality 02:28:04 Social Login (Google and Github) 02:44:36 Categories UI 03:11:34 Listing creation step 1 (Category selection) 03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete) 04:06:40 Listing creation step 3 (Counter components) 04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN) 04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route) 04:49:00 Fetching listings with server components (Listing card component, direct server action) 05:23:12 Favoriting functionality 05:39:27 Individual Listing View 06:16:57 Listing reservation component 06:42:33 Reservation functionality (routes, logic) 06:55:05 Trips screen (Loading trips with server component) 07:10:59 Reservations screen (Loading guest reservations with server component) 07:33:13 Favorites screen (Loading favorites with server component) 07:42:35 Properties screen (Loading your listings with server component) 07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages) 08:37:48 Vercel deploy & wrap up

Intro

Environment setup

Navbar UI

Auth UI

Register functionality, MongoDB, Prisma setup

Login functionality

Social Login (Google and Github)

Categories UI

Show less

761 Comments

Add a comment...

Pinned by Code With Antonio

Code With Antonio

Hello everyone! Happy to share a new tutorial with you. This time we explore the next Next 13 App Router and create a functionality-packed Airbnb clone! As always, if you get stuck in this very long tutorial, feel free to pop into Discord and we will help you out! https://discord.gg/SPEBvAz4Vd

·

huba

There is not even a paid course with nextjs 13 this good, let alone for free, thank you man, your content is really good!

·

Jack Huang

I am highly impressed with the clean code architecture that you have utilized in your coding. Despite using quite some third-party libraries (which are necessary), you have customized most of the components, even small ones like buttons, from scratch based on the specific project requirements. I particularly appreciate how you have abstracted commonly used components and utilized them throughout the entire application. Your code reflects the true fundamental concepts of React which shows how beautiful it can be. Thank you for sharing your valuable content and appreciate your great effort!

·

Singtingz

so far, 32 minutes in, and this is by far one of the cleanest tutorials ever for learning web development. congrats!

Bin Fu Wong

I started this tutorial almost right after it was released, and it took me almost a week because there were so much advanced content to digest. I totally enjoyed this masterclass of yours, which gave an insight on the kind of things developers at big corporations do. This is the second tutorial that I'm doing after the Netflix one, and again thank you so much for walking through the nitty-gritty details step-by-step which is immensely valuable for self-taught developers like myself. I'll dig deeper into the concepts that I'm still weak at, and I look forward to learning from your tutorials again! God Bless!

·

Abdelrahman Abdelaal

Wow, what an amazing video! Antonio, you really have a gift for explaining complex topics in a way that's easy to understand. I learned so much. However, while it's tempting to just copy what Antonio does in the video, it's important to remember that true learning comes from actually working with the frameworks and tools yourself, so don't just rely on this video as a crutch. Thank you, Antonio, for the incredible tutorial and for inspiring us to take our skills to the next level!

·

Adrian Olesniewicz

Antonio, wow! I've always relied on YouTube tutorials to self-learn web development and your video is incredible. I love how you structured and laid out each component, the tech stack is very modern, and you did well to stop and explain certain snippets that are somewhat abstract or more complicated. Your experience definitely shows, and it is truly inspiring. For future videos, it would be awesome if you could explain the reasoning behind using this tech stack and perhaps even areas that would require changes if one were planning to use such a tech stack for a medium-load production project. For example, some questions to just briefly bring up or consider could include whether these queries are efficient and performant, what data could be cached, whether one should use this many dependencies? Overall, such an amazing tutorial, you deserve all the love coming your way, and I hope to see your channel grow even more! Love from Poland and Canada <3

Read more

·

ABDULLAH KARAHAN

I've been improving myself by watching and doing project videos for a long time. I've learned a lot of new things. But Antonio you're amazing man. You've taken me to a higher level and opened my vision. Please continue with your projects and briefly explain every step you take.

·

Sir Drake

I have never been so hyped over a tutorial. This looks very cool and I probably spend the rest of the weekend on my laptop coding along.

Otavio Barros

3 weeks ago (edited)

Your content is awesome Antonio. Thanks for all the knowledge acquired, best ever development channel. So complete and easy to learn along. Also, greetings from Brazil

·

Yannick Le Mouel

I just discovered your channel recently and sincerely your videos are just incredible, especially the last three on Next Js! Could you make others but which would use for example GraphQl or TRPC which is quite popular? I thank you in advance for these requests and thank you again for this very high quality content!

·

leocrawf stewart

This is really good stuff. My go to tutorial for nextjs. Thanks for the gigantic effort.

·

Jp Codes

This is highly impressive. I think we can not appreciate the conveyer enough for this help

·

Navin Avadhani

Excellent work! Learning so much from you. It's rare to see such full fledged apps built with professional standards. Hope to see more apps from you soon!

·

dro dro

Hey Antonio, great content. I was wondering if possible to implement all the backend with Firebase instead of Mongo and Prisma. Also, why did you chose Mongo and Prisma over Firebase ?

Sepudevt

What a beast tutorial, wonderful concepts and extremely helpful best practices. Your way of teaching is insane, keep it upppp!!!

·

Vee Hee

GREAT tutorial videos!!! PLEASE KEEP THEM COMING!!! Also, would be great if you can make a full webapp project that combined with ChatGPT API (for example, making a trip planner web app with Next JS + Tailwind + ChatGPT API) :)

·

msombra msombra

awesome content, keeping doing this great job for the community! thank you.

·

Z_yt

3 weeks ago (edited)

Hey Antonio! I was in the process of trying to build some of this functionality on my own, so this video is incredibly helpful, thank you! I was wondering if you could quickly explain how your approach to the search filtering works, as in my current airbnb clone project I've reached a point where I would need to search index my mongodb listings collection, and build a mongodb aggregation pipeline that can query the nested fields of the dataset I'm working with. Are the query methods you build in this project reliant on a more simple schema and dataset or is Prisma able to simplify the querying process? Can we use Prisma to set up an aggregation pipeline or access Mongodb functions like geoWithin? I'm in the process of starting the video and following along so it may be that you answer some of this within the vid so sorry if these are pre-answered questions! Zak

Read more

·

Mike dev

The most impressive project I have seen on Youtube, liked your coding and teaching style! gave me inspiration to try create some website clone myself.

·

(209) Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023 - YouTube